<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import resize from '@/mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'change-trend'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      //   const that = this
      this.chart = this.$echarts.init(this.$el)
      var color = {
        cleanEnergy: '#24CEF4',
        coalEnergy: '#007C9E',
        oilEnergy: '#005676',
        natgasEnergy: '#003251',
        textColor: '#ffffff'
      }
      //  数据配置
      const source = [
        ['日期', '清洁能源', '原煤', '原油', '天然气'],
        ['1995', 6.2, 75.3, 16.6, 1.9],
        ['2000', 7.7, 72.9, 16.8, 2.6],
        ['2010', 10.04, 76.2, 9.3, 4.1],
        ['2020', 19.7, 67.5, 6.8, 6.0],
        ['2021', 20.3, 67.0, 6.6, 6.1],
        ['2022', 23.3, 66.0, 6.1, 6.1]
      ]
      const pietheme = '能源占比'
      const piedata = [
        {
          name: '清洁能源',
          value: 25
        },
        {
          name: '原煤',
          value: 63
        },
        {
          name: '原油',
          value: 6.1
        },
        {
          name: '天然气',
          value: 5.9
        }
      ]

      this.chart.setOption({
        // backgroundColor: '#fff',
        dataset: {
          source: source
        },
        textStyle: {
          color: color.textColor
        },
        grid: {
          left: 408,
          right: 40,
          top: 64,
          bottom: 64
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: 16,
          formatter: (params) => {
            return params
              .reduce(
                (acc, cur) => {
                  const {
                    data: data,
                    seriesIndex: seriesIndex,
                    seriesName: seriesName,
                    marker: marker,
                    componentSubType: componentSubType
                  } = cur
                  const num =
                    componentSubType === 'line'
                      ? `${data[seriesIndex + 1]}`
                      : `${data[seriesIndex + 1]}`
                  return [...acc, `${marker} ${seriesName}：${num}%`]
                },
                [
                  `<span style="font-size: 14px; color: #FFFFFF; font-weight: bold; padding-bottom: 8px; display: inline-block;">${params[0].name}</span>`
                ]
              )
              .join('</br>')
          }
        },
        legend: {
          show: true,
          top: 16,
          itemWidth: 14,
          itemHeight: 14,
          textStyle: {
            color: color.textColor
          }
        },
        dataZoom: {
          height: 16,
          bottom: 8,
          textStyle: {
            color: '#ffffff'
          }
        },
        color: [
          color.cleanEnergy,
          color.coalEnergy,
          color.oilEnergy,
          color.natgasEnergy
        ],
        xAxis: {
          type: 'category'
        },
        yAxis: {
          type: 'value',
          name: '%',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitNumber: 3.4,
          axisLabel: {
            color: color.textColor
            //   formatter: function (value, index) {
            //     return index * 25
            //   }
          },
          splitLine: {
            textStyle: {
              color: color.textColor
            },
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        series: [
          {
            type: 'bar',
            name: source[0][1],
            barWidth: '50%',
            stack: true,
            encode: {
              x: 0,
              y: 1
            }
          },
          {
            type: 'bar',
            name: source[0][2],
            barWidth: '50%',
            stack: true,
            encode: {
              x: 0,
              y: 2
            }
          },
          {
            type: 'bar',
            name: source[0][3],
            barWidth: '50%',
            stack: true,
            encode: {
              x: 0,
              y: 2
            }
          },
          {
            type: 'bar',
            name: source[0][4],
            barWidth: '50%',
            stack: true,
            encode: {
              x: 0,
              y: 2
            }
          },
          {
            name: pietheme,
            type: 'pie',
            z: 100,
            radius: ['40%', '60%'],
            center: [180, '55%'],
            data: piedata,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c}  ({d}%)'
            },
            label: {
              show: true,
              fontSize: 12,
              formatter: '{b}\n{d}%',
              color: color.textColor
            }
          }
        ]
      })
    }
  }
}
</script>
